import {Component, OnInit, Injector, ViewChild}         from 'angular2/core';
import {HeroListComponent} from './hero-list.component';
import {HeroService}       from './hero.service';
import {ActivityService}       from './activity.service';
// import {ModalComponent} from './modal.component';
// import {CropperComponent} from './cropper.component';

@Component({
  selector: 'my-app',
  template: `
  <h1>Tour2 of Heroes</h1>
  <hero-list></hero-list>
  
  	<!--
    <div>
      <button type="button" class="btn btn-primary btn-lg" (click)="showModal()">
        Launch demo modal
      </button>
    </div>
    <div class="image-photo-div">
        <input id="fileInput" type="file" name="file" #fileInput (change)="showCropper(fileInput)" />
    </div>
    
    <modal-cmp>modal-cmp</modal-cmp>
    <modal-cmp>modal-cmp</modal-cmp>
    <cropper-cmp></cropper-cmp>
	-->
  `,
  directives: [HeroListComponent],
  providers: [HeroService, ActivityService]
})
export class AppComponent implements OnInit {
//   @ViewChild(ModalComponent) modalCmp: ModalComponent;
//   @ViewChild(CropperComponent) cropperCmp: CropperComponent;
  
  constructor(private activityService: ActivityService) {}
  
  ngOnInit() {
    // console.log("----ngOnInit");
    // this.activityService.getActivity();
  }
  
//   showModal() {
//     this.modalCmp.showModal('---------');
//   }
  
//   showCropper(fileInput: any) {
//       var blob = fileInput.files[0];
//     //   var fileName = blob.name;
//       this.cropperCmp.showCropper(blob, {cropBoxWidth: 198, cropBoxHeight: 184}).subscribe((data)=> {
//           console.log(data);
//       }, (error)=>{
//           console.log(error);
//       });
      
//       //很重要
//       $("#fileInput").val('');
//   }
  
 }
